<!-- 更多停车弹出框 -->
<template>
  <div class="dy-panel" v-if="showHeadquartersServerMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <HeadquartersServerYdrxsdbLayer v-if="showYdrxsdbLayer" @closeChild="closeChild"></HeadquartersServerYdrxsdbLayer>
  <headquartersServerTyytfqdbLayer v-if="showTyytfqdbLayer" @closeChild="closeChild"></headquartersServerTyytfqdbLayer>
  <!-- 机房设备 -->
  <headquarters-server-jfsb-layer v-if="showJfsbLayer" @closeChild="closeChild"></headquarters-server-jfsb-layer>
  <!-- 机电设备 -->
  <headquarters-server-jdsb-layer v-if="showJdsbLayer" @closeChild="closeChild"></headquarters-server-jdsb-layer>
  <headquarters-server-fwqjcxx-layer v-if="showFwqjcxxLayer" @closeChild="closeChild"></headquarters-server-fwqjcxx-layer>
</template>
<script setup>
  import {ref} from "vue";
  import ydrxsdbImg from "../../../assets/img/headquartersServer_more/icon3-1.png";
  import tyytfqxsdbImg from "../../../assets/img/headquartersServer_more/icon3-2.png";
  import jfjkImg from "../../../assets/img/headquartersServer_more/icon3-3.png";
  import jdsbImg from "../../../assets/img/headquartersServer_more/icon3-4.png";
import fwqjcxxImg from "../../../assets/img/headquartersServer_more/icon3-5.png";
import HeadquartersServerYdrxsdbLayer from "./headquartersServerYdrxsdbLayer.vue";
import headquartersServerTyytfqdbLayer from "./headquartersServerTyytfqdbLayer.vue";
  import HeadquartersServerJdsbLayer from "./headquartersServerJdsbLayer.vue";
  import HeadquartersServerFwqjcxxLayer from "./headquartersServerFwqjcxxLayer.vue";
  import HeadquartersServerJfsbLayer from "./headquartersServerJfsbLayer.vue";

  const props = defineProps({
    showHeadquartersServerMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const moreDataList = ref([
    {
      title:'月度日销售对比',
      name:'ydrxsdb',
      icon: ydrxsdbImg
    },
    {
      title:'同一业态分区销售对比',
      name:'tyytfqxsdb',
      icon: tyytfqxsdbImg
    },
    {
      title:'机房监控',
      name:'jfsb',
      icon: jfjkImg
    },
    {
      title:'机电设备',
      name:'jdsb',
      icon: jdsbImg
    },
    {
      title:'服务区基础信息',
      name:'fwqjcxx',
      icon: fwqjcxxImg
    }
  ])
  const showYdrxsdbLayer = ref(false);//显示
  const showTyytfqdbLayer = ref(false);//显示
  const showJfsbLayer = ref(false);//机房设备
  const showJdsbLayer = ref(false);//机电设备
  const showFwqjcxxLayer = ref(false);//服务区基础信息

  const closeCurrent = function (){
    emit("closeMoreLayers",'headquartersServer');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'headquartersServer');
  }
  
  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'ydrxsdb'){
      showYdrxsdbLayer.value = true;
    }else if (item.name === 'tyytfqxsdb'){
      showTyytfqdbLayer.value = true;
    }else if (item.name === 'jfsb'){
      showJfsbLayer.value = true;
    }else if (item.name === 'jdsb'){
      showJdsbLayer.value = true;
    }else if (item.name === 'fwqjcxx'){
      showFwqjcxxLayer.value = true;
    }
  }

  const closeChild = function (){
    showCurrent()
    showYdrxsdbLayer.value = false;
    showTyytfqdbLayer.value = false;
    showJfsbLayer.value = false;
    showJdsbLayer.value = false;
    showFwqjcxxLayer.value = false;
  }

</script>
<style scoped>
.dy-panel-item{
  width: 28% !important;
}
</style>
